{% extends "base.html" %}
{% block title %}修改用例{% endblock %}
{% load staticfiles %}
{% load custom_tags %}

{% block content %}

    <div class="am-modal am-modal-confirm" tabindex="-1" id="save_test">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">HttpRunnerManager</div>
            <form class="form-horizontal" id="form_message">
                <div class="form-group" style="display: none">
                    <label class="control-label col-sm-3" for="test_index"
                           style="font-weight: inherit; font-size: small ">用例索引:</label>
                    <div class="col-sm-8">
                        <input name="test_index" type="text" class="form-control" id="test_index"
                               placeholder="模块名称" value="{{ info.id }}">
                    </div>
                </div>

                <div class="form-group" style="display: none">
                    <label class="control-label col-sm-3" for="author"
                           style="font-weight: inherit; font-size: small ">编写人员:</label>
                    <div class="col-sm-8">
                        <input name="author" type="text" class="form-control" id="author"
                               placeholder="模块名称" value="{{ info.author }}">
                    </div>
                </div>

                <div class="form-group" style="display: none">
                    <label class="control-label col-sm-3" for="config_pre"
                           style="font-weight: inherit; font-size: small ">引用配置:</label>
                    <div class="col-sm-8">
                        <input name="config" type="text" class="form-control" id="config_pre"
                               placeholder="引用配置" value="">
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-sm-3" for="case_name"
                           style="font-weight: inherit; font-size: small ">用例名称:</label>
                    <div class="col-sm-8">
                        <input name="case_name" type="text" class="form-control" id="case_name"
                               placeholder="给用例起个名吧" value="{{ info.name }}">
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-sm-3"
                           style="font-weight: inherit; font-size: small ">选择项目:</label>
                    <div class="col-sm-8">
                        <select name="project" class="form-control"
                                onchange="auto_load('#form_message', '/api/edit_case/', '#module', 'module')">
                            <option value="{{ info.belong_project }}"
                                    selected>{{ info.belong_project }}</option>
                            {% for obj in project %}
                                {% ifnotequal info.belong_project obj.project_name %}
                                    <option value='{{ obj.project_name }}'>{{ obj.project_name }}</option>
                                {% endifnotequal %}
                            {% endfor %}
                            <option value="请选择">请选择</option>
                        </select>
                    </div>

                </div>

                <div class="form-group">
                    <label class="control-label col-sm-3"
                           style="font-weight: inherit; font-size: small ">选择模块:</label>
                    <div class="col-sm-8">
                        <select class="form-control" id="module" name="module">
                            <option value="{{ info.belong_module.id }}">{{ info.belong_module.module_name }}</option>
                        </select>
                    </div>

                </div>
            </form>
            <div class="am-modal-footer">
                <span class="am-modal-btn" data-am-modal-cancel>取消</span>
                <span class="am-modal-btn" data-am-modal-confirm>确定</span>
            </div>
        </div>
    </div>


    <div class="admin-biaogelist" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">

        <div class="listbiaoti am-cf">
            <ul class="am-icon-flag on"> 用例修改</ul>
            <dl class="am-icon-home" style="float: right;">当前位置： 用例管理 > <a href="#">修改用例</a></dl>
        </div>

        <div class="am-tabs am-margin">
            <ul class="am-tabs-nav am-nav am-nav-tabs" id="tab-test">
                <li><a href="javascript:;" data-target="#tab1">messages</a></li>
                <li><a href="javascript:;" data-target="#tab3">request</a></li>
                <li><a href="javascript:;" data-target="#tab4">extract/validate</a></li>
                <li><a href="javascript:;" data-target="#tab2">variables/parameters</a></li>
            </ul>

            <div class="am-tabs-bd">
                <div class="am-tab-panel" id="tab1">
                    <div style="float: left; width: 40%;">
                        <form class="form-horizontal" id="belong_message">

                            <div class="form-group">
                                <div class="input-group col-md-10 col-md-offset-1">
                                    <div class="input-group-addon" style="color: #0a628f">可选项目</div>
                                    <select name="project" class="form-control"
                                            onchange="auto_load('#belong_message', '/api/edit_case/', '#belong_module_id', 'module')">
                                        <option value="{{ info.belong_project }}"
                                                selected>{{ info.belong_project }}</option>
                                        {% for obj in project %}
                                            {% ifnotequal info.belong_project obj.project_name %}
                                                <option value='{{ obj.project_name }}'>{{ obj.project_name }}</option>
                                            {% endifnotequal %}
                                        {% endfor %}
                                        <option value="请选择">请选择</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="input-group col-md-10 col-md-offset-1">
                                    <div class="input-group-addon" style="color: #0a628f">可选模块</div>
                                    <select id="belong_module_id" name="module" class="form-control"
                                            onchange="auto_load('#belong_message', '/api/add_case/', '#belong_case_id', 'case');
                                        auto_load('#belong_message', '/api/edit_case/', '#config', 'config')">
                                        <option value="{{ info.belong_module.id }}">{{ info.belong_module.module_name }}</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="input-group col-md-10 col-md-offset-1">
                                    <div class="input-group-addon" style="color: #0a628f">可选配置</div>
                                    <select id="config" name="config" class="form-control">
                                        {% if 'config' in include.0.keys %}
                                            <option value="{{ include.0.config.0 }}">{{ include.0.config.1 }}</option>
                                        {% endif %}
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="input-group col-md-10 col-md-offset-1">
                                    <div class="input-group-addon" style="color: #0a628f">可选用例</div>
                                    <select id="belong_case_id" name="include" class="form-control">
                                    </select>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div style="float: right; width: 50%;margin-right: 1%;">
                        <div class="form-group">
                            <div class="input-group col-md-10">
                                <div class="input-group-addon" id="close_collapse" style="color: #0a628f">用例列表</div>

                                <a class="am-btn am-btn-primary am-radius am-btn-block" href="#" id="pre_collapse"
                                   style="font-size: 16px; background-color: #fff; color: #555; text-align: left"
                                   data-am-collapse="{target: '#pre_case'}">
                                    用 例 执 行 顺 序
                                </a>
                                <nav>
                                    <ul id="pre_case" class="am-nav">
                                        {% for foo in info.include|convert_eval %}
                                            {% if foo|data_type != 'list' %}
                                                <li id="{{ foo.config.0 }}" name="pre_config">
                                                    <a href="/api/edit_config/{{ foo.config.0 }}/"
                                                       id="{{ foo.config.0 }}"
                                                       style="color:cadetblue">{{ foo.config.1 }}</a>
                                                    <i class="js-remove"
                                                       onclick=remove_self('#{{ foo.config.0 }}')>✖</i></li>
                                                </li>
                                            {% else %}
                                                <li id="{{ foo.0 }}">
                                                    <a href="/api/edit_case/{{ foo.0 }}/"
                                                       id="{{ foo.0 }}">{{ foo.1 }}</a>
                                                    <i class="js-remove" onclick=remove_self('#{{ foo.0 }}')>✖</i>
                                                </li>

                                            {% endif %}
                                        {% endfor %}

                                    </ul>
                                </nav>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="am-tab-panel" id="tab2">
                    <button class="btn btn-info" value="添 加" onclick="add_row('variables')">add variables</button>
                    <button class="btn btn-danger" value="删 除" onclick="del_row('variables')">del variables</button>
                    <button class="btn btn-info" value="添 加" onclick="add_params('params')">add param</button>
                    <button class="btn btn-danger" value="删 除" onclick="del_row('params')">del param</button>
                    <button class="btn btn-info" value="添 加" onclick="add_row('hooks')">add hooks</button>
                    <button class="btn btn-danger" value="删 除" onclick="del_row('hooks')">del hooks</button>
                    <form id="form_variables">
                        <table class="table table-hover table-condensed table-bordered table-striped" id="variables">
                            <caption>Variables:</caption>
                            <thead>
                            <tr class="active text-success">
                                <th width="5%" align="center">Option</th>
                                <th width="30%" align="center">Key</th>
                                <th width="8%" align="center">Type</th>
                                <th width="57%" align="center">Value</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for foo in request.variables %}
                                <tr>
                                    <td><input type="checkbox" name="variables" style="width:55px"></td>
                                    {% for key, value in foo.items %}

                                        <td><input type="text" name="test[][key]"
                                                   value="{{ key }}" style="width:100%; border: none"></td>
                                        <td>
                                            <select name='test[][type]'
                                                    class='form-control'
                                                    style='height: 25px; font-size: 15px; padding-top: 0px; padding-left: 0px; border: none'>

                                                {% if value|data_type == 'str' %}
                                                    <option>string</option>
                                                    <option>int</option>
                                                    <option>float</option>
                                                    <option>boolean</option>
                                                {% elif value|data_type == 'int' %}
                                                    <option>int</option>
                                                    <option>string</option>
                                                    <option>float</option>
                                                    <option>boolean</option>
                                                {% elif value|data_type == 'float' %}
                                                    <option>float</option>
                                                    <option>string</option>
                                                    <option>int</option>
                                                    <option>boolean</option>
                                                {% elif value|data_type == 'bool' %}
                                                    <option>boolean</option>
                                                    <option>string</option>
                                                    <option>int</option>
                                                    <option>float</option>
                                                {% endif %}
                                            </select>
                                        </td>
                                        <td><input type="text"
                                                   name="test[][value]" value="{{ value }}"
                                                   style="width:100%; border: none"></td>
                                    {% endfor %}
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </form>

                    <form id="form_params">
                        <table class="table table-hover table-condensed table-bordered table-striped" id="params">
                            <caption>parameters:</caption>
                            <thead>
                            <tr class="active text-success">
                                <th width="5%" align="center">Option</th>
                                <th width="20%" align="center">Key</th>
                                <th width="75%" align="center">Value</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for foo in request.parameters %}
                                <tr>
                                    {% for key, value in foo.items %}
                                        <td><input type="checkbox" name="params" style="width:55px"></td>
                                        <td><textarea name='test[][key]'
                                                      style="width:100%; border: none">{{ key }}</textarea></td>
                                        <td><textarea name='test[][value]'
                                                      style="width:100%; border: none">{{ value }}</textarea></td>

                                    {% endfor %}

                                </tr>
                            {% endfor %}

                            </tbody>
                        </table>
                    </form>
                    <form id="form_hooks">
                        <table class="table table-hover table-condensed table-bordered table-striped" id="hooks">
                            <caption>hooks:</caption>
                            <thead>
                            <tr class="active text-success">
                                <th width="5%" align="center">Option</th>
                                <th width="47.5%" align="center">setup_hooks</th>
                                <th width="47.5%" align="center">teardown_hooks</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% if request.setup_hooks|length >= request.teardown_hooks|length %}
                                {% for foo in  request.setup_hooks %}
                                    <tr>
                                        <td><input type="checkbox" name="hooks" style="width:55px"></td>
                                        <td><input type="text" name='test[][key]'
                                                   value="{{ foo }}" style="width:100%; border: none"></td>
                                        <td>
                                            {% for foos in  request.teardown_hooks %}
                                                {% if forloop.parentloop.counter0 == forloop.counter0 %}
                                                    <input type="text" name='test[][value]'
                                                           value="{{ foos }}"
                                                           style="width:100%; border: none">
                                                {% endif %}
                                            {% endfor %}
                                            {% if forloop.counter > request.teardown_hooks|length %}
                                                <input type="text" name='test[][value]'
                                                       value=""
                                                       style="width:100%; border: none">

                                            {% endif %}
                                        </td>

                                    </tr>
                                {% endfor %}
                            {% else %}
                                {% for foo in  request.teardown_hooks %}
                                    <tr>
                                        <td><input type="checkbox" name="hooks" style="width:55px"></td>
                                        <td>
                                            {% for foos in  request.setup_hooks %}
                                                {% if forloop.parentloop.counter0 == forloop.counter0 %}
                                                    <input type="text" name='test[][key]'
                                                           value="{{ foos }}"
                                                           style="width:100%; border: none">
                                                {% endif %}
                                            {% endfor %}
                                            {% if forloop.counter > request.setup_hooks|length %}
                                                <input type="text" name='test[][key]'
                                                       value=""
                                                       style="width:100%; border: none">

                                            {% endif %}
                                        </td>
                                        <td><input type="text" name='test[][value]'
                                                   value="{{ foo }}" style="width:100%; border: none"></td>

                                    </tr>
                                {% endfor %}

                            {% endif %}

                            </tbody>
                        </table>
                    </form>

                </div>
                <div class="am-tab-panel" id="tab3">
                    <div class="form-inline">
                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-addon">URL</div>
                                <input type="text" class="form-control am-input-sm " placeholder="api url"
                                       name="url"
                                       id="url" value="{{ request.request.url }}">
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-addon">Method</div>
                                <select class="form-control" name="method" id="method">
                                    <option>{{ request.request.method }}</option>
                                    {% if request.request.method == 'GET' %}
                                        <option>POST</option>
                                        <option>PUT</option>
                                        <option>DELETE</option>
                                    {% elif request.request.method == 'POST' %}
                                        <option>GET</option>
                                        <option>PUT</option>
                                        <option>DELETE</option>
                                    {% elif request.request.method == 'PUT' %}
                                        <option>GET</option>
                                        <option>POST</option>
                                        <option>DELETE</option>
                                    {% elif request.request.method == 'DELETE' %}
                                        <option>GET</option>
                                        <option>POST</option>
                                        <option>DELETE</option>

                                    {% endif %}
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-addon">Type</div>
                                <select class="form-control" name="DataType" id="DataType">
                                    {% if 'data' in request.request.keys %}
                                        <option selected>data</option>
                                        <option>json</option>
                                        <option>params</option>
                                    {% elif 'json' in request.request.keys %}
                                        <option selected>json</option>
                                        <option>data</option>
                                        <option>params</option>
                                    {% elif 'params' in request.request.keys %}
                                        <option selected>params</option>
                                        <option>data</option>
                                        <option>json</option>
                                    {% else %}
                                        <option>data</option>
                                        <option>json</option>
                                        <option>params</option>

                                    {% endif %}
                                </select>
                            </div>
                        </div>

                        <button class="btn btn-info" value="添 加" onclick="add_row('data')" id="add_data">add data
                        </button>
                        <button class="btn btn-danger" value="删 除" onclick="del_row('data')" id="del_data">del data
                        </button>
                        <button class="btn btn-info" value="添 加" onclick="add_row('header')">add headers</button>
                        <button class="btn btn-danger" value="删 除" onclick="del_row('header')">del headers</button>
                        <form id="form_request_data">
                            {% if 'json' in request.request.keys %}
                                <span style="font-size:10px;" id="json-text">
                                   <div style="margin-left: 0px; margin-top: 5px; height: 200px">
                                       <pre id="code" class="ace_editor"
                                            style="margin-top: 0px; margin-bottom: 0px; min-height: 200px;">
<textarea style="left: 0px">
{{ request.request.json|json_dumps }}
</textarea>
                                       </pre>
                                   </div>
                                </span>
                            {% else %}
                                <table class="table table-hover table-condensed table-bordered table-striped" id="data">
                                    <caption>request:</caption>
                                    <thead>
                                    <tr class="active text-success">
                                        <th width="5%" align="center">Option</th>
                                        <th width="30%" align="center">Key</th>
                                        <th width="5%" align="center">Type</th>
                                        <th width="60%" align="center">Value</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% if 'data' in request.request.keys %}
                                        {% for key, value in request.request.data.items %}
                                            <tr>
                                                <td><input type="checkbox" name="data" style="width:55px">
                                                </td>
                                                <td><input type="text" name='test[][key]' value="{{ key }}"
                                                           style="width:100%; border: none"></td>
                                                <td><select name='test[][type]'
                                                            class='form-control'
                                                            style='height: 25px; font-size: 15px; padding-top: 0px; padding-left: 0px; border: none'>
                                                    {% if value|data_type == 'str' %}
                                                        <option>string</option>
                                                        <option>int</option>
                                                        <option>float</option>
                                                        <option>boolean</option>
                                                    {% elif value|data_type == 'int' %}
                                                        <option>int</option>
                                                        <option>string</option>
                                                        <option>float</option>
                                                        <option>boolean</option>
                                                    {% elif value|data_type == 'float' %}
                                                        <option>float</option>
                                                        <option>string</option>
                                                        <option>int</option>
                                                        <option>boolean</option>
                                                    {% elif value|data_type == 'bool' %}
                                                        <option>boolean</option>
                                                        <option>string</option>
                                                        <option>int</option>
                                                        <option>float</option>
                                                    {% endif %}
                                                </select></td>
                                                <td><input type="text" name='test[][value]' value="{{ value }}"
                                                           style="width:100%; border: none"></td>
                                            </tr>
                                        {% endfor %}
                                    {% elif 'params' in request.request.keys %}
                                        {% for key, value in request.request.params.items %}
                                            <tr>
                                                <td><input type="checkbox" name="data"
                                                           style="width:55px">
                                                </td>
                                                <td><input type="text" name='test[][key]' value="{{ key }}"
                                                           style="width:100%; border: none"></td>
                                                <td><select name='test[][type]'
                                                            class='form-control'
                                                            style='height: 25px; font-size: 15px; padding-top: 0px; padding-left: 0px; border: none'>
                                                    {% if value|data_type == 'str' %}
                                                        <option>string</option>
                                                        <option>int</option>
                                                        <option>float</option>
                                                        <option>boolean</option>
                                                    {% elif value|data_type == 'int' %}
                                                        <option>int</option>
                                                        <option>string</option>
                                                        <option>float</option>
                                                        <option>boolean</option>
                                                    {% elif value|data_type == 'float' %}
                                                        <option>float</option>
                                                        <option>string</option>
                                                        <option>int</option>
                                                        <option>boolean</option>
                                                    {% elif value|data_type == 'bool' %}
                                                        <option>boolean</option>
                                                        <option>string</option>
                                                        <option>int</option>
                                                        <option>float</option>
                                                    {% endif %}
                                                </select></td>
                                                <td><input type="text" name='test[][value]' value="{{ value }}"
                                                           style="width:100%; border: none"></td>
                                            </tr>
                                        {% endfor %}
                                    {% endif %}
                                    </tbody>
                                </table>
                            {% endif %}
                        </form>

                        <form id="form_request_headers">
                            <table class="table table-hover table-condensed table-bordered table-striped" id="header">
                                <caption>headers:</caption>
                                <thead>
                                <tr class="active text-success">
                                    <th width="5%" align="center">Option</th>
                                    <th width="40%" align="center">Key</th>
                                    <th width="55%" align="center">Value</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% if 'headers' in request.request.keys %}
                                    {% for key, value in request.request.headers.items %}
                                        <tr>
                                            <td><input type="checkbox" name="header" style="width:55px">
                                            </td>
                                            <td><input type="text" name='test[][key]' value="{{ key }}"
                                                       style="width:100%; border: none"></td>
                                            <td><input type="text" name='test[][value]' value="{{ value }}"
                                                       style="width:100%; border: none"></td>
                                        </tr>
                                    {% endfor %}
                                {% endif %}
                                </tbody>
                            </table>
                        </form>
                    </div>
                </div>
                <div class="am-tab-panel" id="tab4">
                    <button class="btn btn-info" value="添 加" onclick="add_row('extract')">add extract</button>
                    <button class="btn btn-danger" value="删 除" onclick="del_row('extract')">del extract</button>
                    <button class="btn btn-info" value="添 加" onclick="add_row('validate')">add validate</button>
                    <button class="btn btn-danger" value="删 除" onclick="del_row('validate')">del validate</button>
                    <form id="form_extract">
                        <table class="table table-hover table-condensed table-bordered table-striped" id="extract">
                            <caption>extract:</caption>
                            <thead>
                            <tr class="active text-success">
                                <th width="5%" align="center">Option</th>
                                <th width="40%" align="center">Key</th>
                                <th width="55%" align="center">Value</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for foo in request.extract %}
                                <tr>
                                    <td><input type="checkbox" name="extract" style="width:55px"></td>
                                    {% for key, value in foo.items %}

                                        <td><input type="text" name='test[][key]' value="{{ key }}"
                                                   style="width:100%; border: none"></td>
                                        <td><input type="text" name='test[][value]' value="{{ value }}"
                                                   style="width:100%; border: none"></td>
                                    {% endfor %}
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </form>
                    <form id="form_validate">
                        <table class="table table-hover table-condensed table-bordered table-striped" id="validate">
                            <caption>validate:</caption>
                            <thead>
                            <tr class="active text-success">
                                <th width="2%" align="center">Option</th>
                                <th width="30%" align="center">Check</th>
                                <th width="10%" align="center">Comparator</th>
                                <th width="8%" align="center">Type</th>
                                <th width="50%" align="center">Expected</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for foo in request.validate %}
                                <tr>
                                    <td><input type="checkbox" name="validate"
                                               style="width:55px"></td>
                                    <td><input type="text" name='test[][key]' value="{{ foo.check }}"
                                               style="width:100%; border: none"></td>
                                    <td><select name='test[][comparator]' class="form-control"
                                                style="height: 25px; font-size: 15px; padding-top: 0px; padding-left: 0px; border: none">
                                        {% ifequal foo.comparator 'equals' %}
                                            <option selected>{{ foo.comparator }}</option>
                                        {% else %}
                                            <option>equals</option>
                                        {% endifequal %}

                                        {% ifequal foo.comparator 'contains' %}
                                            <option selected>{{ foo.comparator }}</option>
                                        {% else %}
                                            <option>contains</option>
                                        {% endifequal %}
                                        {% ifequal foo.comparator 'startswith' %}
                                            <option selected>{{ foo.comparator }}</option>
                                        {% else %}
                                            <option>startswith</option>
                                        {% endifequal %}
                                        {% ifequal foo.comparator 'endswith' %}
                                            <option selected>{{ foo.comparator }}</option>
                                        {% else %}
                                            <option>endswith</option>
                                        {% endifequal %}

                                        {% ifequal foo.comparator 'regex_match' %}
                                            <option selected>{{ foo.comparator }}</option>
                                        {% else %}
                                            <option>regex_match</option>
                                        {% endifequal %}
                                        {% ifequal foo.comparator 'type_match' %}
                                            <option selected>{{ foo.comparator }}</option>
                                        {% else %}
                                            <option>type_match</option>
                                        {% endifequal %}
                                        {% ifequal foo.comparator 'contained_by' %}
                                            <option selected>{{ foo.comparator }}</option>
                                        {% else %}
                                            <option>contained_by</option>
                                        {% endifequal %}

                                        {% ifequal foo.comparator 'less_than' %}
                                            <option selected>{{ foo.comparator }}</option>
                                        {% else %}
                                            <option>less_than</option>
                                        {% endifequal %}
                                        {% ifequal foo.comparator 'less_than_or_equals' %}
                                            <option selected>{{ foo.comparator }}</option>
                                        {% else %}
                                            <option>less_than_or_equals</option>
                                        {% endifequal %}
                                        {% ifequal foo.comparator 'greater_than' %}
                                            <option selected>{{ foo.comparator }}</option>
                                        {% else %}
                                            <option>greater_than</option>
                                        {% endifequal %}

                                        {% ifequal foo.comparator 'greater_than_or_equals' %}
                                            <option selected>{{ foo.comparator }}</option>
                                        {% else %}
                                            <option>greater_than_or_equals</option>
                                        {% endifequal %}
                                        {% ifequal foo.comparator 'not_equals' %}
                                            <option selected>{{ foo.comparator }}</option>
                                        {% else %}
                                            <option>not_equals</option>
                                        {% endifequal %}
                                        {% ifequal foo.comparator 'string_equals' %}
                                            <option selected>{{ foo.comparator }}</option>
                                        {% else %}
                                            <option>string_equals</option>
                                        {% endifequal %}

                                        {% ifequal foo.comparator 'length_equals' %}
                                            <option selected>{{ foo.comparator }}</option>
                                        {% else %}
                                            <option>length_equals</option>
                                        {% endifequal %}
                                        {% ifequal foo.comparator 'length_greater_than' %}
                                            <option selected>{{ foo.comparator }}</option>
                                        {% else %}
                                            <option>length_greater_than</option>
                                        {% endifequal %}
                                        {% ifequal foo.comparator 'length_greater_than_or_equals' %}
                                            <option selected>{{ foo.comparator }}</option>
                                        {% else %}
                                            <option>length_greater_than_or_equals</option>
                                        {% endifequal %}

                                        {% ifequal foo.comparator 'length_less_than' %}
                                            <option selected>{{ foo.comparator }}</option>
                                        {% else %}
                                            <option>length_less_than</option>
                                        {% endifequal %}
                                        {% ifequal foo.comparator 'length_less_than_or_equals' %}
                                            <option selected>{{ foo.comparator }}</option>
                                        {% else %}
                                            <option>length_less_than_or_equals</option>
                                        {% endifequal %}

                                    </select></td>
                                    <td>
                                        <select name='test[][type]'
                                                class='form-control'
                                                style='height: 25px; font-size: 15px; padding-top: 0px; padding-left: 0px; border: none'>
                                            {% if foo.expected|data_type == 'str' %}
                                                <option>string</option>
                                                <option>int</option>
                                                <option>float</option>
                                                <option>boolean</option>
                                            {% elif foo.expected|data_type == 'int' %}
                                                <option>int</option>
                                                <option>string</option>
                                                <option>float</option>
                                                <option>boolean</option>
                                            {% elif foo.expected|data_type == 'float' %}
                                                <option>float</option>
                                                <option>string</option>
                                                <option>int</option>
                                                <option>boolean</option>
                                            {% elif foo.expected|data_type == 'bool' %}
                                                <option>boolean</option>
                                                <option>string</option>
                                                <option>int</option>
                                                <option>float</option>
                                            {% endif %}
                                        </select>
                                    </td>
                                    <td><input type="text" name='test[][value]' value="{{ foo.expected }}"
                                               style="width:100%; border: none"></td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </form>
                </div>

            </div>

        </div>

        <div class="am-form-group am-cf">
            <div class="you" style="margin-left: 11%;">
                <button type="button" id="save" class="am-btn am-btn-success am-radius">点 击 修
                    改
                </button>&nbsp;
                &raquo; &nbsp;
                <a type="submit" href="/api/add_case/" class="am-btn am-btn-secondary am-radius">新 增 用 例</a>
            </div>
        </div>
    </div>

    <script>
        try {
            editor = ace.edit("code");
            init_acs('json', 'github', editor);
        } catch (err) {
            editor = null;
        }
        $('#DataType').on('change', function () {
            if ($('#DataType').val() === 'json') {
                $('#add_data').attr('disabled', true);
                $('#del_data').attr('disabled', true);
                $('#data').remove();
                var json_text = "<span style=\"font-size:10px;\" id=\"json-text\">\n" +
                    " <div style=\"margin-left: 0px; margin-top: 5px; height: 200px\">" +
                    "<pre id=\"code\" class=\"ace_editor\" style=\"margin-top: 0px; margin-bottom: 0px; min-height: 200px;\">\n" +
                    "<textarea>\n" +
                    "{\"key\":\"value\"}\n" +
                    "</textarea>\n" +
                    "</pre></div></span>";
                $('#form_request_data').append(json_text);
                editor = ace.edit("code");
                init_acs('json', 'github', editor);

            } else {
                var table = '<table class="table table-hover table-condensed table-bordered table-striped" id="data">\n' +
                    '                                <caption>' + $('#DataType').val() + ':</caption>\n' +
                    '                                <thead>\n' +
                    '                                <tr class="active text-success">\n' +
                    '                                    <th width="5%" align="center">Option</th>\n' +
                    '                                    <th width="30%" align="center">Key</th>\n' +
                    '                                    <th width="5%" align="center">Type</th>\n' +
                    '                                    <th width="60%" align="center">Value</th>\n' +
                    '                                </tr>\n' +
                    '                                </thead>\n' +
                    '                                <tbody>\n' +
                    '                                </tbody>\n' +
                    '                            </table>';

                $('#add_data').text('add ' + $('#DataType').val());
                $('#del_data').text('del ' + $('#DataType').val());

                $('#add_data').removeAttr("disabled");
                $('#del_data').removeAttr("disabled");
                $('#data').remove();
                $('#json-text').remove();
                $('#form_request_data').append(table);
            }
        });

        $("#tab-test").on("click", "li", function () {
            $(this).addClass("am-active").siblings("li").removeClass("am-active");
            var target = $(this).children("a").attr("data-target");
            $(target).addClass("am-active").siblings(".am-tab-panel").removeClass("am-active");
        }).find("li").eq(0).trigger("click");

        $(function () {
            $("#pre_case").sortable();
            $("#pre_case").disableSelection();
        });

        $('#belong_case_id').on('change', function () {
            if ($('#belong_case_id').val() !== '请选择') {
                case_id = $('#belong_case_id').val();
                case_name = $('#belong_case_id option:selected').text();
                var href = "<li id=" + case_id + "><a href='/api/edit_case/" + case_id + "/' id = " + case_id + ">" + case_name + "" +
                    "</a><i class=\"js-remove\" onclick=remove_self('#" + case_id + "')>✖</i></li>";
                $("#pre_case").append(href);
            }
        });

        function remove_self(id) {
            $(id).remove();
        }

        $('#config').on('change', function () {
            if ($('#config').val() !== '请选择') {
                var case_id = $('#config').val();
                var case_name = $('#config option:selected').text();
                var href = "<li id=" + case_id + " name='pre_config'><a style='color: cadetblue' href='/api/edit_config/" + case_id + "/' id = " + case_id + ">" + case_name + "" +
                    "</a><i class=\"js-remove\" onclick=remove_self('#" + case_id + "')>✖</i></li>";
                $("li[name='pre_config']").remove();
                $("#pre_case").prepend(href);
                $('#config_pre').val("{'config': ['" + case_id + "', '" + case_name + "']}");
            }
        });

        $(function () {
            $('#add_data').text('add ' + $('#DataType').val());
            $('#del_data').text('del ' + $('#DataType').val());
        });

        $(function () {
            if ($("li[name='pre_config']")) {
                var case_id = $('#config').val();
                var case_name = $('#config option:selected').text();
                $('#config_pre').val("{'config': ['" + case_id + "', '" + case_name + "']}");
            }

        });

        $('#save').on('click', function () {
            if ($("li[name='pre_config']").length <= 0) {
                $('#config_pre').val("");
            }
            $('#save_test').modal({
                relatedTarget: this,
                onConfirm: function () {
                    case_ajax('edit', editor)
                },
                onCancel: function () {
                }
            });
        })

    </script>
{% endblock %}

